<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>goodadd11</title>
</head> 
<style>
    #root,
    html,
    body {
        height: 100%;
        width: 100%;
        border: 0;
        padding: 0;
        margin: 0;
    }

    .add {
        background-color: aqua;
        width: 400px;
        height: 300px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;

    }

    .addbox {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        padding: 0;
        border: 0;
        display: none;
        background-color: rgba(86, 86, 86, 0.5);
    }

    table {
        width: 80%;
        margin: 0 auto;
        border: 0;
        padding: 0;
    }
</style>

<body>
    <div id="root">
        <button class="addbtn">添加数据</button>
        <div class="addbox">
            <div class="add">
                <input type="text" id="title" placeholder="请添加商品名称"><br>
                <input type="text" id="price" placeholder="请添加商品价格"><br>
                <button class="subbtn">提交</button>
            </div>
        </div>
        <p>添加表格</p>
        //这是一个注释
        <table border="1">
            <thead>
                <tr>
                    <th>全选<input type="checkbox"></th>
                    <th>序号</th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>


    </div>

</body>
<script>
    const arr = []
    let root = document.querySelector('body')
    let btn = document.querySelector(".addbtn")
    let box = document.querySelector('.addbox')
    let sub = document.querySelector('.subbtn')
    let title = document.getElementById('title')
    let price = document.getElementById('price')
    let tbody = document.querySelector('tbody')
    btn.onclick = () => {
        box.style.display = 'block'

    }

    sub.onclick = () => {
        box.style.display = 'none'

        if (title.value && price.value) {
            let obj = {
                title: title.value,
                price: price.value,
            }
            arr.push(obj)
            render(arr)

        }
        else {
            alert('请填写完整')
        }

    }
    // box.onclick = () => {
    //     event.stopPropagation() //阻止冒泡捕获
    // }
    function render(arr) {
        // console.log(...arguments);
        // console.log(Array.from(arguments));
        let str = ''
        arr.forEach((item, index) => {
            str += `
                <tr>
                    <td><input type="checkbox"></td>
                    <td>${index + 1}</td>
                    <td>${item.title}</td>
                    <td>${item.price}</td>
                    <td>
                        <button onclick=del(${index})>删除</button>
                        <button onclick=addcar(${index})>加入购物车</button>
                    </td>
                </tr>
            `
        });

        tbody.innerHTML = str
    }
    function del(e) {
        //使用删除节点的方式删除  是通过传递this指向dom节点
        // e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode)

        arr.splice(e,1)
        render(arr)
    }
    function addcar(index) {
        let localarr = JSON.parse(localStorage.getItem('localarr')) || []
        //查看是否存在  是判断数据的依据
        let isin = localarr.findIndex((item) => {
            return item.title == arr[index].title && item.price == arr[index].price
        })
        if (isin != -1) {
            localarr[isin].num += 1
        } else {
            arr[index].num = 1
            localarr.push(arr[index])
        }
        console.log(localarr);

        window.localStorage.setItem('localarr', JSON.stringify(localarr))
        location.href = "shopcar.html"
    }
</script>

</html>